<template>
	<view class="my-lesson d-flex flex-column">
		<!-- <view class="top flex-between">
      <view class="d-flex">
        <view>
          <view class="name">{{
            studentList[studentIndex].student_info["姓名"]
          }}</view>
          <view class="phone">{{
            studentList[studentIndex].student_info["手机号"]
          }}</view>
        </view>
        <view class="switch flex-center" @click="onSwitch">切换</view>
      </view>
      <u-avatar
        size="90rpx"
        src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/32a9f058e75294fa8f6fed6d06c9184c9ef50908.png"
      ></u-avatar>
    </view> -->

		<u-sticky>
			<u-tabs :list="tabsList" lineColor="#4786fe" :activeStyle="{
          color: '#2f75fa',
        }" :inactiveStyle="{
          color: '#353535',
        }" :lineWidth="30" :current="currentTab" @click="onClickTab" />
		</u-sticky>

		<view class="content flex-grow-1">
			<view class="list" v-if="list.length" :class="{ end: currentTab === 1 }">
				<view class="item pr d-flex justify-space-between flex-column" v-for="item in list" :key="item.id"
					@click="onClick(item)">
					<view>
						<view class="flex-align">
							<view style="margin-right: 12rpx" v-if="item.private">
								<u-tag text="私教" :bgColor="currentTab === 0 ? '#FC39E3' : '#dcdcdc'"
									borderColor="rgba(0,0,0,0)" color="#fff" size="mini"></u-tag>
							</view>
							<view class="name">{{ item.class_name }}</view>
						</view>
						<view class="detail-2">
							<view
								style="float: left; width: 22%;height: 60rpx;background-color: #2f75fa1a;border-radius: 30rpx;">
								<image style="float: left;width: 60rpx; height: 60rpx;border-radius: 50%;"
									src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61a70accdc329c0011116ca9/16594248632239150855.png"
									mode=""></image>
								<view style="float: right;line-height: 60rpx;color: #333333;margin-right: 6rpx;">
									李商隐
								</view>
							</view>
							<view style="float: right;margin-top: -58rpx;">
								<view class="flex-col text-wrapper_1"><text class="text_5">今 07:00~08:00</text></view>
							</view>

						</view>
						<view class="date pa flex-center" v-if="item.today && currentTab !== 1">{{ item.today }}</view>
						<view style="margin-top: 20rpx" v-if="item.tag" class="d-flex">
							<u-tag :text="item.tag" :bgColor="
                  currentTab === 0 ? 'rgba(255, 143, 5, 0.1)' : '#dcdcdc'
                " :color="currentTab === 0 ? '#FF8F05' : '#fff'" shape="circle" borderColor="rgba(0,0,0,0)"></u-tag>
						</view>
					</view>

					<view class="bottom flex-between">
						<view class="left flex-align">
							<view class="it">50人</view>
							<view class="it">10/20课</view>
							<view class="it">07.15-07.30</view>
							<view class="it">李教练</view>
						</view>
						<navigator :url="`/pages/personal/qrcode/qrcode?id=${item.id}&title=我的课包&choose=选择消费课`"
							v-if="currentTab !== 1">
							<view class="qrcode">
								<u-image :src="`${assetsPath}fdacef21716adb6bb50e280a9351814e2327e9fd.png`"
									width="52rpx" height="52rpx"></u-image>
							</view>
						</navigator>
					</view>
				</view>
			</view>

			<u-empty v-else text="暂无数据" icon="https://sass-test.doit10019.com/upload/202501/08114139-33838600519097990.jpg?attname=coupon.jpg" />

			<!-- <u-popup
        :show="showChooseStudent"
        mode="center"
        @close="showChooseStudent = false"
        :safeAreaInsetBottom="false"
        round="20rpx"
        closeable
        customStyle="width: 90%;"
      >
        <view class="choose-student">
          <view class="title"> 选择想要查看的学生 </view>

          <scroll-view class="student-list" scroll-y>
            <view
              v-for="(item, index) in studentList"
              :key="item.id"
              class="student-item flex-align"
              @click="chooseStudent(index, item.id)"
            >
              <u-avatar
                size="100rpx"
                src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/32a9f058e75294fa8f6fed6d06c9184c9ef50908.png"
              ></u-avatar>
              <view style="margin-left: 30rpx">
                <view class="flex-align">
                  <view class="name">{{ item.student_info["姓名"] }}</view>
                  <u-icon
                    :name="item.student_info['性别'] === '男' ? 'man' : 'woman'"
                    size="30rpx"
                    :color="
                      item.student_info['性别'] === '男' ? '#016dff' : '#ff0178'
                    "
                  ></u-icon>
                </view>
                <view class="course"
                  >年龄: {{ item.student_info["年龄"] }}</view
                >
              </view>
            </view>
          </scroll-view>
        </view>
      </u-popup> -->
		</view>
	</view>
</template>

<script>
	const index = require("@/api/personal/index.js");
	export default {
		data() {
			return {
				assetsPath: this.$https.assetsPath,
				currentTab: 0,
				showChooseStudent: false,
				tabsList: [{
					name: "进行中"
				}, {
					name: "已结束"
				}],
				list: [],
				currentStudent: {
					name: "李大奔",
					phone: "13576354535",
				},
				studentList: [

				],
				studentIndex: 0,
			};
		},
		onLoad(options) {
			this.getMyClass();
		},
		methods: {
			onClickTab({
				index
			}) {
				this.currentTab = index;
			},
			onSwitch() {
				this.showChooseStudent = true;
			},
			onClick(item) {
				if (this.currentTab === 0) {
					uni.navigateTo({
						url: `/pages/personal/my-lesson/class-detail/class-detail?id=${item.class_id}&title=${item.class_name}`,
					});
				}
			},
			chooseStudent(index, id) {
				this.studentIndex = index;
				this.showChooseStudent = false;
				this.chooseStudentData(id);
			},
			async getMyClass() {
				let params = {
					project_id: getApp().globalData.projectId,
					user_id: uni.getStorageSync("phone"),
					openid: uni.getStorageSync("openid"),
					appid: this.$https.weixinAppId,
				};
				let res = await index.getMyClass(params);
				if (res.code === 1) {
					this.list = res.data.classData;
					this.studentList = res.data.studentList;
					console.log(this.studentList)
				}
			},
			// 切换学员
			async chooseStudentData(student_id) {
				let param = {
					student_id: student_id,
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
				};
				let res = await index.chooseStudent(param);

				if (res.code == 1) {
					this.list = res.data.classData;
					this.$forceUpdate();
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.my-lesson {
		min-height: 100vh;
		background-color: #2f75fa;

		.top {
			padding: 30rpx 40rpx;
			color: #eaf8f8;

			.name {
				font-size: 36rpx;
				font-weight: bold;
			}

			.phone {
				font-size: 26rpx;
				margin-top: 18rpx;
			}

			.switch {
				width: 100rpx;
				height: 100rpx;
				background: rgba(40, 40, 40, 0.2);
				border-radius: 50%;
				margin-left: 30rpx;
				font-size: 24rpx;
			}
		}

		/deep/.u-tabs {
			background-color: #fff;
			border-bottom: 1px solid #e5e5e5;
			// border-radius: 30rpx 30rpx 0 0;

			.u-tabs__wrapper__nav__item {
				flex: 1;
			}

			.u-tabs__wrapper__nav__line {
				bottom: 0;
			}
		}

		.content {
			padding: 30rpx;
			padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
			background-color: #fff;
		}

		.list {
			&.end {
				.name {
					color: #999;
				}
			}

			.item {
				box-shadow: 0px 6rpx 13rpx 1rpx rgba(23, 106, 180, 0.2);
				border-radius: 20rpx;
				background: #ffffff;
				padding: 30rpx 20rpx;
				height: 220rpx;

				&+.item {
					margin-top: 30rpx;
				}

				.name {
					font-size: 30rpx;
					font-weight: bold;
					line-height: 34rpx;
				}

				.detail-2 {
					width: 100%;
					height: 70rpx;
					margin-top: 17rpx;
					color: #bebebe;
					font-size: 22rpx;
					font-weight: 500;
				}

				.text-wrapper_1 {
					padding: 11.5rpx 0 14rpx;
					background-color: #fa4c4c;
					border-radius: 25.5rpx 0px 0px 25.5rpx;
					height: 52rpx;
				}

				.text_5 {
					margin-left: 21rpx;
					margin-right: 4rpx;
					color: #ffffff;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 22rpx;
					margin-top: -10rpx;
				}

				.date {
					right: 0;
					top: 30rpx;
					background: #fa4c4c;
					border-radius: 26rpx 0px 0px 26rpx;
					width: 198rpx;
					height: 52rpx;
					font-size: 24rpx;
					color: #fff;
				}

				.bottom {
					font-size: 22rpx;

					.left {
						.it {
							&+.it {
								margin-left: 35rpx;
							}
						}
					}
				}
			}
		}

		.choose-student {
			padding: 80rpx 30rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				text-align: center;
			}

			.student-list {
				margin-top: 60rpx;
				max-height: 600rpx;
				min-height: 530rpx;

				.student-item {
					background-color: #f3f3f3;
					padding: 50rpx 40rpx;
					border-radius: 20rpx;
					height: 120rpx;

					&+.student-item {
						margin-top: 50rpx;
					}

					.name {
						font-size: 25rpx;
						font-weight: bold;
						margin-right: 20rpx;
					}

					.course {
						color: #c1c1c1;
						font-size: 25rpx;
						margin-top: 30rpx;
					}
				}
			}
		}
	}
</style>
